<template>
  <div class="birth-info-page">
    <!-- 主页面背景 -->
    <div class="page-background">
      <!-- 标题区域 -->
      <div class="title-section">
        <h1 class="main-title">·请输入你的生辰信息·</h1>
      </div>
      <div class="form-section">
        <div class="form-item">
          <div class="form-label">姓名</div>
          <!-- <input
              type="text"
              placeholder="请输入姓名（必须填汉字）"
              v-model="submitFormInfo.userName"
            /> -->
          <div class="input-wrapper">
            <input
              class="form-input"
              type="text"
              placeholder="请输入内容"
              v-model="submitFormInfo.userName"
              @focus="handleInputFocus"
              @blur="handleInputBlur"
            />
          </div>

          <!-- <div class="bazijp__form-item" @click="gearDateVisible = true">
            <label>出生日期：</label>
            <input
              type="text"
              id="birthday"
              data-toid-date="date"
              data-type="0"
              placeholder="请选择出生日期"
              data-toid-hour="hour"
              @focus="handleInputFocus"
              @blur="handleInputBlur"
              v-model="selectTimeRes"
              style="width: 100%; box-sizing: border-box"
            />

            <input type="hidden" id="date" />
            <input type="hidden" id="hour" name="hour" />
          </div> -->
        </div>
        <div class="form-item">
          <label class="form-label" style="margin-right: 15px">性别</label>
          <div class="radio-group">
            <label
              class="radio-item"
              :class="{ active: submitFormInfo.sex === 1 }"
            >
              <input
                type="radio"
                v-model="submitFormInfo.sex"
                :value="1"
                class="radio-input"
              />
              <span class="radio-text">男</span>
            </label>
            <label
              class="radio-item"
              :class="{ active: submitFormInfo.sex === 2 }"
            >
              <input
                type="radio"
                v-model="submitFormInfo.sex"
                :value="2"
                class="radio-input"
              />
              <span class="radio-text">女</span>
            </label>
          </div>
        </div>
        <div class="form-item" @click="gearDateVisible = true">
          <label class="form-label">生辰</label>
          <div class="birth-input-wrapper">
            <input
              type="text"
              id="birthday"
              class="form-input birth-input"
              data-toid-date="date"
              data-type="0"
              readonly
              placeholder="请选择出生日期"
              data-toid-hour="hour"
              @focus="handleInputFocus"
              @blur="handleInputBlur"
              v-model="selectTimeRes"
            />

            <input type="hidden" id="date" />
            <input type="hidden" id="hour" name="hour" />
          </div>
        </div>

        <div class="bazijp__form-action">
          <input
            type="image"
            @click="handleFormSubmit()"
            src="https://hpay.yqiaoart.top/assets/submit.png"
            width="94%"
            class="btn-zoom"
            style="width: 94%"
          />
        </div>
      </div>
    </div>
    <div class="gearDate" v-if="gearDateVisible" @click.stop>
      <div class="overlay"></div>
      <div class="date_ctrl bounceInUp">
        <div class="date_btn_wrap">
          <div
            class="date_btn lcalendar_cancel"
            @click="gearDateVisible = false"
          >
            取消
          </div>
          <div class="date_btn lcalendar_finish" @click="submitSelectTime()">
            确认
          </div>
        </div>
        <div class="date_choice_wrap">
          <div class="date_class_box">
            <div
              class="date_class lcalendar_gongli active"
              @click="handleLcalendar(0)"
              ref="gongli"
            >
              公历
            </div>
            <div
              class="date_class lcalendar_nongli"
              @click="handleLcalendar(1)"
              ref="nongli"
            >
              农历
            </div>
          </div>
          <div class="date_roll_mask">
            <div class="date_roll date_roll_hh">
              <div>
                <div
                  class="gear date_yy"
                  data-datetype="date_yy"
                  val="45"
                  top="-80em"
                  :style="{
                    transform: `translate(0px,${yearMousewheelValue}em)`,
                  }"
                  @wheel.stop.prevent="mousewheel($event, 'year')"
                  @mouseenter="hoveredSelector = 'year'"
                  @mouseleave="hoveredSelector = null"
                  @touchstart="startTouch($event, 'year')"
                  @touchmove="moveTouch($event, 'year')"
                  @touchend="endTouch($event, 'year')"
                >
                  <div class="tooth" v-for="item in years" :key="item">
                    {{ item }}
                  </div>
                </div>
                <div class="date_grid"></div>
              </div>
              <div>
                <div
                  class="gear date_mm"
                  data-datetype="date_mm"
                  val="1"
                  top="6em"
                  :style="{
                    transform: `translate(0px,${monthMousewheelValue}em)`,
                  }"
                  @wheel.stop.prevent="mousewheel($event, 'month')"
                  @mouseenter="hoveredSelector = 'month'"
                  @mouseleave="hoveredSelector = null"
                  @touchstart="startTouch($event, 'month')"
                  @touchmove="moveTouch($event, 'month')"
                  @touchend="endTouch($event, 'month')"
                  v-if="lcalendarSelect == 0"
                >
                  <div class="tooth" v-for="item in months" :key="item">
                    {{ item }}
                  </div>
                </div>
                <div
                  class="gear date_mm"
                  data-datetype="date_mm"
                  val="1"
                  top="6em"
                  :style="{
                    transform: `translate(0px,${monthMousewheelValue}em)`,
                  }"
                  @wheel.stop.prevent="mousewheel($event, 'month')"
                  @mouseenter="hoveredSelector = 'month'"
                  @mouseleave="hoveredSelector = null"
                  @touchstart="startTouch($event, 'month')"
                  @touchmove="moveTouch($event, 'month')"
                  @touchend="endTouch($event, 'month')"
                  v-else
                >
                  <div class="tooth" v-for="item in monthsNongLi" :key="item">
                    {{ item }}
                  </div>
                </div>
                <div class="date_grid"></div>
              </div>
              <div>
                <div
                  class="gear date_dd"
                  data-datetype="date_dd"
                  val="26"
                  top="-44em"
                  :style="{
                    transform: `translate(0px,${dayMousewheelValue}em)`,
                  }"
                  @wheel.stop.prevent="mousewheel($event, 'day')"
                  @mouseenter="hoveredSelector = 'day'"
                  @mouseleave="hoveredSelector = null"
                  @touchstart="startTouch($event, 'day')"
                  @touchmove="moveTouch($event, 'day')"
                  @touchend="endTouch($event, 'day')"
                  v-if="lcalendarSelect == 0"
                >
                  <div class="tooth" v-for="item in daysInMonth" :key="item">
                    {{ item }}
                  </div>
                </div>

                <div
                  class="gear date_dd"
                  data-datetype="date_dd"
                  val="26"
                  top="-44em"
                  :style="{
                    transform: `translate(0px,${dayMousewheelValue}em)`,
                  }"
                  @wheel.stop.prevent="mousewheel($event, 'day')"
                  @mouseenter="hoveredSelector = 'day'"
                  @mouseleave="hoveredSelector = null"
                  @touchstart="startTouch($event, 'day')"
                  @touchmove="moveTouch($event, 'day')"
                  @touchend="endTouch($event, 'day')"
                  v-else
                >
                  <div class="tooth" v-for="item in lunarDayNames" :key="item">
                    {{ item }}
                  </div>
                  <div
                    class="tooth"
                    v-if="
                      computedNongliDay(
                        submitTimeForm.year,
                        submitTimeForm.month
                      ) == 30
                    "
                  >
                    三十
                  </div>
                </div>
                <div class="date_grid"></div>
              </div>
              <div>
                <div
                  class="gear date_hh"
                  data-datetype="date_hh"
                  val="0"
                  top="8em"
                  :style="{
                    transform: `translate(0px,${hourMousewheelValue}em)`,
                  }"
                  @wheel.stop.prevent="mousewheel($event, 'hour')"
                  @mouseenter="hoveredSelector = 'hour'"
                  @touchstart="startTouch($event, 'hour')"
                  @touchmove="moveTouch($event, 'hour')"
                  @touchend="endTouch($event, 'hour')"
                  @mouseleave="hoveredSelector = null"
                >
                  <div
                    class="tooth"
                    v-for="item in timePeriodsArray"
                    :key="item"
                  >
                    <span v-if="item.startTime != null">
                      {{ item.startTime }}-{{ item.endTime }} ({{
                        item.periodName
                      }})
                    </span>
                    <span v-else>
                      {{ item.periodName }}
                    </span>
                  </div>
                </div>
                <div class="date_grid"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="date_confirm_wrap">
          <div class="confirm_tit">确认时间</div>
          <div class="confirm_tip">请确认输入的时间是否正确</div>
          <div class="confirm_p">
            公 (阳) 历：<b class="confirm_gongli"></b>
          </div>
          <div class="confirm_p">
            农 (阴) 历：<b class="confirm_nongli"></b>
          </div>
          <div class="confirm_btn">
            <div class="confirm_btn_cancel">返回修改</div>
            <div class="confirm_btn_finish">确认正确</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import router from "@/router";
import { ref, computed, watch } from "vue";

const buyTarget = ref(false);
const selectedDate = ref("");
const lunarDate = ref("");
const confirmationVisible = ref(false);

const getLunarDate = () => {};
const handleDateChange = (value) => {
  // 这里可以将阳历转换为农历
  lunarDate.value = getLunarDate(value);
};
const showConfirmation = () => {
  confirmationVisible.value = true;
};
// 防止 iOS 输入框缩放的方法
const handleInputFocus = () => {
  // 禁用缩放
  document.body.style.zoom = "1";
  document.body.style.transform = "scale(1)";
  document.body.style.transformOrigin = "0 0";
};

const handleInputBlur = () => {
  // 恢复缩放
  document.body.style.zoom = "";
  document.body.style.transform = "";
  document.body.style.transformOrigin = "";
};
const confirmDate = () => {
  // 确认逻辑
  confirmationVisible.value = false;
  // this.$message.success("时间确认成功");
};
const cancelConfirmation = () => {
  confirmationVisible.value = false;
};
const marqueeList = ref(0);

const marqueeScore = () => {
  setInterval(() => {
    marqueeList.value = (marqueeList.value + 1) % 100;
    console.log(marqueeList.value);
  }, 10000);
};
const sexRef = ref(null);
const sexwoman = ref(null);
const sexMan = ref(null);
const gearDateVisible = ref(false);
const submitFormInfo = ref({
  userName: "",
  sex: 1,
  time: null,
});
const submitTimeForm = ref({
  year: 1985,
  month: 1,
  day: 16,
  hour: null,
});

const computedNongliDay = (year, monthIndex) => {
  let temp = nongliDayNum[year - 1940];
  let res = temp.dayNum[monthIndex - 1];
  return res;
};

const nongliDayNum = [
  { year: 1940, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 1941, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1942, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1943, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 1944, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 1945, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1946, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1947, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1948, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 1949, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1950, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1951, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1952, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 1953, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1954, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1955, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 1956, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 1957, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 1958, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1959, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1960, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1961, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 1962, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1963, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1964, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 1965, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 1966, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 1967, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1968, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1969, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1970, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 1971, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1972, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1973, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 1974, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 1975, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 1976, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1977, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1978, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1979, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 1980, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1981, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1982, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 1983, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 1984, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 1985, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1986, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1987, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1988, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 1989, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1990, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1991, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 1992, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 1993, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 1994, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1995, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1996, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 1997, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 1998, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 1999, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2000, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 2001, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 2002, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 2003, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2004, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2005, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2006, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 2007, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2008, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2009, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 2010, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 2011, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 2012, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2013, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2014, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2015, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 2016, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2017, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2018, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 2019, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 2020, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 2021, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2022, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2023, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2024, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 2025, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2026, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2027, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 2028, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 2029, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 2030, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2031, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2032, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2033, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] },
  { year: 2034, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2035, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
  { year: 2036, dayNum: [30, 29, 30, 29, 30, 30, 29, 30, 29, 30, 29, 29] },
  { year: 2037, dayNum: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] },
  { year: 2038, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30, 29] },
  { year: 2039, dayNum: [30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 30] },
  { year: 2040, dayNum: [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 30] },
];

const handleAgreeVisible = ref(false);

const handleAgree = () => {
  handleAgreeVisible.value = true;
};

const flatpickrFunc = () => {
  flatpickr("#datepicker", {
    dateFormat: "Y-m-d", // 只显示年月日
    enableTime: false, // 禁用时间选择
  });
};

const hourCount = ref(0);
const waitVisible = ref(false);

const hoveredSelector = ref(null);

// 添加节流控制变量
const lastWheelTime = ref(0);
const wheelThrottleDelay = 150; // 增加节流延迟到 150ms，防止滑动过快

const accountTop = ref(0);
const topSetCount = ref(0);
const timeId = () => {
  setInterval(() => {
    accountTop.value = accountTop.value - 2.8129;
    topSetCount.value++;
    if (topSetCount.value == 21) {
      accountTop.value = 0;
      topSetCount.value = 0;
    }
  }, 2000);
};
timeId();

const startY = ref(); //年
const startM = ref(); //月
const startD = ref(); //日
const startH = ref(); //时辰

const startTouch = (event, type) => {
  // 保存触摸起始位置
  if (type == "year") {
    startY.value = event.touches[0].clientY;
  } else if (type == "month") {
    startM.value = event.touches[0].clientY;
  } else if (type == "day") {
    startD.value = event.touches[0].clientY;
  } else if (type == "hour") {
    startH.value = event.touches[0].clientY;
  }
};

const moveTouch = (event, type) => {
  // 获取当前触摸位置
  const touchCurrentY = event.touches[0].clientY;

  let deltaY; // 声明 deltaY 变量

  if (type == "year") {
    deltaY = startY.value - touchCurrentY; // 修改方向
  } else if (type == "month") {
    deltaY = startM.value - touchCurrentY; // 修改方向
  } else if (type == "day") {
    deltaY = startD.value - touchCurrentY; // 修改方向
  } else if (type == "hour") {
    deltaY = startH.value - touchCurrentY; // 修改方向
  }

  // 限制触摸滑动的敏感度，防止滑动过快
  const sensitivity = 2; // 降低敏感度
  const adjustedDeltaY = deltaY * sensitivity;

  if (Math.abs(adjustedDeltaY) > 12) {
    // 提高触发阈值
    if (adjustedDeltaY > 0) {
      // 向下滚动
      mousewheel({ deltaY: adjustedDeltaY }, type);
    } else {
      // 向上滚动
      mousewheel({ deltaY: adjustedDeltaY }, type);
    }
  }
};

const endTouch = (event, type) => {
  // 重置起始触摸位置
  if (type == "year") {
    startY.value = null;
  } else if (type == "month") {
    startM.value = null;
  } else if (type == "data") {
    startD.value = null;
  } else if (type == "hour") {
    startH.value = null;
  }
};

const gongli = ref(null);
const nongli = ref(null);

const lcalendarSelect = ref(0);
const handleLcalendar = () => {
  gongli.value.classList.toggle("active");
  nongli.value.classList.toggle("active");
  lcalendarSelect.value = lcalendarSelect.value == 0 ? 1 : 0;
};

const clickSex = (sex) => {
  sexwoman.value.classList.toggle("active");
  sexMan.value.classList.toggle("active");
  if (sex == 1) {
    submitFormInfo.value.sex = 1;
  } else {
    submitFormInfo.value.sex = 2;
  }
};

window.onload = () => {
  const originalUrl = localstorage.getItem("originalurl");
  if (originalUrl) {
    window.location.href = originalUrl;
    localstorage.removeItem("originalurl"); //清除存储的 URL
  }
};

const handleFormSubmit = () => {
  if (
    submitFormInfo.value.userName &&
    submitFormInfo.value.sex &&
    submitFormInfo.value.time
  ) {
    if (!validateName(submitFormInfo.value.userName)) {
      return;
    }
    if (submitFormInfo.value.sex == 2) {
      submitFormInfo.value.sex == 0;
    }
    waitVisible.value = true;
    setTimeout(() => {
      submitFormInfo.value.lcalendarSelect = lcalendarSelect.value;
      localStorage.setItem(
        "submitFormInfo",
        JSON.stringify(submitFormInfo.value)
      );
      localStorage.setItem(
        "lcalendarSelect",
        JSON.stringify(lcalendarSelect.value)
      );
      router.push({
        path: "/analysis",
        query: submitFormInfo.value,
      });
    }, 100);
    return;
  } else {
    alert("不能为空");
  }
  // alert("不能为空");
  // router.push("/BirthFrom");
};
/**
 * 验证中文姓名是否合法
 * @param {string} name 待验证的姓名
 * @returns {object} 验证结果对象 {valid: boolean, message: string}
 */
const validateName = (name) => {
  const trimmedName = name.trim();
  if (!trimmedName) {
    alert("姓名不能为空");
    return false;
  }
  // 中文姓名正则表达式：2-10 个汉字
  const chineseNameRegex = /^[\u4e00-\u9fa5]{2,10}$/;

  // 验证姓名格式
  if (!chineseNameRegex.test(trimmedName)) {
    alert("请输入正确的姓名");
    return false;
  }
  return true;
};
const years = Array.from({ length: 91 }, (_, i) => 1940 + i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const monthsNongLi = [
  "正月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月",
  "八月",
  "九月",
  "十月",
  "十一月",
  "十二月",
];
const lunarDayNames = [
  "初一",
  "初二",
  "初三",
  "初四",
  "初五",
  "初六",
  "初七",
  "初八",
  "初九",
  "初十",
  "十一",
  "十二",
  "十三",
  "十四",
  "十五",
  "十六",
  "十七",
  "十八",
  "十九",
  "二十",
  "廿一",
  "廿二",
  "廿三",
  "廿四",
  "廿五",
  "廿六",
  "廿七",
  "廿八",
  "廿九",
];
// const timePeriodsString = `时辰未知，00:00-00:59(早子),01:00-01:59(丑),02:00-02:59(丑),03:00-03:59(寅),04:00-04:59(寅),05:00-05:59(卯),06:00-06:59(卯),07:00-07:59(辰),08:00-08:59(辰),09:00-09:59(巳),10:00-10:59(巳),11:00-11:59(午),12:00-12:59(午),13:00-13:59(未),14:00-14:59(未),15:00-15:59(申),16:00-16:59(申),17:00-17:59(酉),18:00-18:59(酉),19:00-19:59(戌),20:00-20:59(戌),21:00-21:59(亥),22:00-22:59(亥),23:00-23:59(晚子)`;
const timePeriodsArray = [
  { startTime: null, endTime: null, periodName: "时辰未知" },
  { startTime: "00:00", endTime: "00:59", periodName: "早子" },
  { startTime: "01:00", endTime: "01:59", periodName: "丑" },
  { startTime: "02:00", endTime: "02:59", periodName: "丑" },
  { startTime: "03:00", endTime: "03:59", periodName: "寅" },
  { startTime: "04:00", endTime: "04:59", periodName: "寅" },
  { startTime: "05:00", endTime: "05:59", periodName: "卯" },
  { startTime: "06:00", endTime: "06:59", periodName: "卯" },
  { startTime: "07:00", endTime: "07:59", periodName: "辰" },
  { startTime: "08:00", endTime: "08:59", periodName: "辰" },
  { startTime: "09:00", endTime: "09:59", periodName: "巳" },
  { startTime: "10:00", endTime: "10:59", periodName: "巳" },
  { startTime: "11:00", endTime: "11:59", periodName: "午" },
  { startTime: "12:00", endTime: "12:59", periodName: "午" },
  { startTime: "13:00", endTime: "13:59", periodName: "未" },
  { startTime: "14:00", endTime: "14:59", periodName: "未" },
  { startTime: "15:00", endTime: "15:59", periodName: "申" },
  { startTime: "16:00", endTime: "16:59", periodName: "申" },
  { startTime: "17:00", endTime: "17:59", periodName: "酉" },
  { startTime: "18:00", endTime: "18:59", periodName: "酉" },
  { startTime: "19:00", endTime: "19:59", periodName: "戌" },
  { startTime: "20:00", endTime: "20:59", periodName: "戌" },
  { startTime: "21:00", endTime: "21:59", periodName: "亥" },
  { startTime: "22:00", endTime: "22:59", periodName: "亥" },
  { startTime: "23:00", endTime: "23:59", periodName: "晚子" },
];
// const timePeriodsArray = timePeriodsString.split(',')
const daysInMonth = computed(() => {
  const year = submitTimeForm.value.year;
  const month = submitTimeForm.value.month;
  // 判断是否为闰年
  const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
  // 各月天数（索引 0-11 对应 1-12 月）
  const monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  // 闰年 2 月有 29 天
  if (month === 2 && isLeapYear) {
    return 29;
  }
  return monthDays[month - 1];
});
const preventScroll = () => {
  document.body.style.overflow = "hidden";
};

// 允许滚动
const allowScroll = () => {
  document.body.style.overflow = "auto";
};
watch(
  () => gearDateVisible.value,
  (v) => {
    if (v) {
      preventScroll();
      document.body.classList.add("no-scroll");
    } else {
      document.body.style.overflow = "auto";
      document.body.classList.remove("no-scroll");
    }
  }
);

// 其他 JavaScript 代码，用于实现日期选择逻辑
const yearMousewheelValue = ref(-82);
const monthMousewheelValue = ref(8);
const dayMousewheelValue = ref(-22);
const hourMousewheelValue = ref(8);
const mousewheel = (e, type) => {
  // 添加节流控制，防止滑动过快
  const now = Date.now();
  if (now - lastWheelTime.value < wheelThrottleDelay) {
    return; // 如果距离上次滑动时间太短，则忽略此次滑动
  }
  lastWheelTime.value = now;

  const delta = e.deltaY > 0 ? 1 : -1;

  if (type === "year") {
    // 限制年份滑动的变化量，防止滑动过快
    const absDeltaY = Math.abs(e.deltaY);
    let changeAmount = 1; // 默认每次改变 1 年

    // 根据滑动速度调整变化量，但限制最大变化量
    if (absDeltaY > 50) {
      changeAmount = Math.min(Math.floor(absDeltaY / 50), 5); // 最多一次改变5年
    }

    if (delta == 1) {
      if (submitTimeForm.value.year < 2030) {
        const maxChange = Math.min(
          changeAmount,
          2030 - submitTimeForm.value.year
        );
        yearMousewheelValue.value = yearMousewheelValue.value - 2 * maxChange;
        submitTimeForm.value.year += maxChange;
      }
    } else {
      if (submitTimeForm.value.year > 1940) {
        const maxChange = Math.min(
          changeAmount,
          submitTimeForm.value.year - 1940
        );
        yearMousewheelValue.value = yearMousewheelValue.value + 2 * maxChange;
        submitTimeForm.value.year -= maxChange;
      }
    }
  } else if (type === "month") {
    if (delta == 1) {
      if (submitTimeForm.value.month < 12) {
        monthMousewheelValue.value = monthMousewheelValue.value - 2;
        submitTimeForm.value.month++;
        if (lcalendarSelect.value == 0) {
          if (submitTimeForm.value.day > daysInMonth.value) {
            dayMousewheelValue.value =
              dayMousewheelValue.value +
              2 * (submitTimeForm.value.day - daysInMonth.value);
            submitTimeForm.value.day = daysInMonth.value;
          }
        } else {
          let nongliDayNum = computedNongliDay(
            submitTimeForm.value.year,
            submitTimeForm.value.month
          );
          if (submitTimeForm.value.day > nongliDayNum) {
            dayMousewheelValue.value =
              dayMousewheelValue.value +
              2 * (submitTimeForm.value.day - nongliDayNum);
            submitTimeForm.value.day = nongliDayNum;
          }
        }
      }
    } else {
      if (submitTimeForm.value.month > 1) {
        monthMousewheelValue.value = monthMousewheelValue.value + 2;
        submitTimeForm.value.month--;
        if (lcalendarSelect.value == 0) {
          if (submitTimeForm.value.day > daysInMonth.value) {
            dayMousewheelValue.value =
              dayMousewheelValue.value -
              2 * (submitTimeForm.value.day - daysInMonth.value);
            submitTimeForm.value.day = daysInMonth.value;
          }
        } else {
          let nongliDayNum = computedNongliDay(
            submitTimeForm.value.year,
            submitTimeForm.value.month
          );
          if (submitTimeForm.value.day > nongliDayNum) {
            dayMousewheelValue.value =
              dayMousewheelValue.value -
              2 * (submitTimeForm.value.day - nongliDayNum);
            submitTimeForm.value.day = nongliDayNum;
          }
        }
      }
    }
  } else if (type === "day") {
    console.log(
      submitTimeForm.value.day,
      daysInMonth.value,
      dayMousewheelValue.value
    );
    if (delta == 1) {
      if (lcalendarSelect.value == 0) {
        if (submitTimeForm.value.day < daysInMonth.value) {
          dayMousewheelValue.value = dayMousewheelValue.value - 2;
          submitTimeForm.value.day++;
        }
      } else {
        if (
          submitTimeForm.value.day <
          computedNongliDay(
            submitTimeForm.value.year,
            submitTimeForm.value.month
          )
        ) {
          dayMousewheelValue.value = dayMousewheelValue.value - 2;
          submitTimeForm.value.day++;
        }
      }
    } else {
      if (submitTimeForm.value.day > 1) {
        dayMousewheelValue.value = dayMousewheelValue.value + 2;
        submitTimeForm.value.day--;
      }
    }
  } else if (type === "hour") {
    if (delta == 1) {
      console.log("hourCount", hourCount.value);
      console.log("hourMousewheelValue", hourMousewheelValue.value);
      if (hourCount.value < timePeriodsArray.length - 1) {
        hourMousewheelValue.value = hourMousewheelValue.value - 2;
        hourCount.value++;
      }
    } else {
      console.log("10", hourCount.value);
      if (hourCount.value > 0) {
        hourMousewheelValue.value = hourMousewheelValue.value + 2;
        hourCount.value--;
      }
    }
  }
};

const focusInput = (event) => {
  // flatpickrFunc;
  // 获取当前输入框并聚焦
  // event.target.focus();
};

const convertTimeFormat = (timeRange) => {
  return timeRange.replace(/(\d{1,2}):\d{2}/g, (match) => {
    return parseInt(match.split(":")[0], 10) + "时";
  });
};
const selectTimeRes = computed(() => {
  let hourInfo = "";
  if (submitTimeForm.value.hour == null) {
    return "";
  }
  if (submitTimeForm.value.hour.startTime != null) {
    hourInfo = convertTimeFormat(submitTimeForm.value.hour.startTime);
  } else {
    hourInfo = submitTimeForm.value.hour.periodName;
  }
  if (lcalendarSelect.value == 0) {
    return (
      "公历：" +
      submitTimeForm.value.year +
      "-" +
      submitTimeForm.value.month +
      "-" +
      submitTimeForm.value.day +
      " " +
      hourInfo
    );
  } else {
    let dayInfo = computedNongliDay(
      submitTimeForm.value.year,
      submitTimeForm.value.month
    );
    let resDay =
      dayInfo == 30 && submitTimeForm.value.day == 30
        ? "三十"
        : lunarDayNames[submitTimeForm.value.day - 1];
    let res =
      "农历：" +
      submitTimeForm.value.year +
      "年" +
      monthsNongLi[submitTimeForm.value.month - 1] +
      resDay +
      " " +
      hourInfo;
    console.log(res);
    return res;
  }
});

const submitSelectTime = () => {
  submitTimeForm.value.hour = timePeriodsArray[hourCount.value];
  console.log(
    timePeriodsArray[hourCount.value],
    "timePeriodsArray[hourCount.value]"
  );

  gearDateVisible.value = false;
  submitFormInfo.value.time = JSON.stringify(submitTimeForm.value);
  localStorage.removeItem("lcalendarSelect");

  localStorage.setItem(
    "lcalendarSelect",
    JSON.stringify(lcalendarSelect.value)
  );
};

marqueeScore();
</script>

<style scoped lang="scss">
@import url("../../assets/index_static/app.css");

.birth-info-page {
  height: 100vh;
  background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
  position: relative;
  overflow: hidden;
}

.page-background {
  position: relative;
  z-index: 1;
  padding: 20px !important;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 装饰性背景元素 */
.page-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
      circle at 20% 20%,
      rgba(255, 215, 0, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 215, 0, 0.1) 0%,
      transparent 50%
    );
  z-index: -1;
}

/* 标题区域 */
.title-section {
  text-align: center;
  margin-bottom: 40px;
  padding-top: 60px;
}

.main-title {
  color: #ffd700;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}

/* 表单区域 */
.form-section {
  width: 100%;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  border-radius: 20px;
}

.form-item {
  margin-bottom: 25px;
  display: flex;
  justify-content: left;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 45px;
  height: 28px;
  width: 96%;
}

.form-label {
  display: block;
  color: #b2ad90;
  margin-bottom: 8px;
  padding: 5px 0 0 11px;
  width: 50px;
}

.input-wrapper {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 16px;
  color: #ffd700;
  transition: all 0.3s ease;
  box-sizing: border-box;
  border: none;
  background: none;
}

.form-input:focus {
  border: none;
  background: none;
  outline: none;
  border-color: #ffd700;
  color: #ffd700;
}

.birth-input-wrapper {
  position: relative;
  cursor: pointer;
  width: 100%;
}
body.no-scroll {
  overflow: hidden;
}
.calendar-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #666;
  pointer-events: none;
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  gap: 20px;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  justify-content: center;
  width: 15px;
  color: rgba(255, 215, 0, 0.5);
}

.radio-item.active {
  background: #ffd700;
  border-color: #ffd700;
  color: #1a237e;
  font-weight: bold;
  width: 15px;
}

.radio-input {
  display: none;
}

.radio-text {
  font-size: 16px;
  font-weight: 500;
}

/* 按钮区域 */
.action-section {
  margin-top: 40px;
  text-align: center;
}

.fortune-btn {
  position: relative;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 40px;
  font-size: 18px;
  font-weight: bold;
  color: #1a237e;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  min-width: 280px;
}

.fortune-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.fortune-btn:active {
  transform: translateY(0);
}

.btn-decoration {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #1a237e;
}

.btn-decoration.left {
  left: 15px;
}

.btn-decoration.right {
  right: 15px;
}

.btn-text {
  display: inline-block;
  padding: 0 20px;
}

/* 日期选择弹窗样式 */
.gearDate {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  position: fixed;
  overflow-y: scroll;
  // top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9900;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transform: translateZ(0);
}

.date_ctrl {
  vertical-align: middle;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  color: #363837;
  margin: 0;
  height: 40% !important;
  width: 100%;
  max-width: 600px;
  position: absolute;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9902;
  margin: 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -ms-user-select: none;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.bounceInUp {
  -webkit-animation: bounceInUp 0.3s ease-in;
  animation: bounceInUp 0.3s ease-in;
}

@-webkit-keyframes bounceInUp {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

.date_roll {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: transparent;
  -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0));
  mask: gradient(
    linear,
    0 50%,
    0 100%,
    from(#debb47),
    to(rgba(36, 142, 36, 0))
  );
}

.date_roll > div {
  font-size: 2em;
  height: 10em;
  float: left;
  background-color: transparent;
  position: relative;
  width: 33.3333%;
}

.date_roll_hh > div {
  width: 20%;
}

.date_roll_hh > div:last-child {
  width: 40%;
}

.date_roll_hhii > div {
  width: 20%;
}

.date_roll_mask {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  -webkit-mask: -webkit-linear-gradient(
    bottom,
    #debb47 50%,
    rgba(36, 142, 36, 0)
  );
  mask: -webkit-gradient(
    linear,
    0 40%,
    0 0,
    from(#debb47),
    to(rgba(36, 142, 36, 0))
  );
}

.date_grid {
  position: relative;
  top: 4em;
  width: 100%;
  height: 2em;
  margin: 0;
  box-sizing: border-box;
  z-index: 0;
  border-top: 2px solid #fe5b00;
  border-bottom: 2px solid #fe5b00;
  box-shadow: #fe5b00 0 0 4px;
  opacity: 0.3;
}

.date_grid > div {
  color: #000;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.8em;
  line-height: 2.5em;
}

.date_cw_btn {
  position: relative;
}

.date_class_box {
  text-align: center;
  padding: 1em 0;
  border-bottom: 1px solid #f6f6f6;
}

.date_class {
  display: inline-block;
  font-size: 1.4em;
  padding: 0.2em 0;
  width: 25%;
  text-align: center;
  color: #fe5b00;
  border: 1px solid #fe5b00;
  cursor: pointer;
  line-height: 1.6em;
  box-sizing: border-box;
}

.date_class:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-weight: 700;
}

.date_class:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.date_class_box .active {
  background-color: #fe5b00;
  color: #fff;
}

.date_btn_box {
  overflow: hidden;
  border-top: 1px solid #f6f6f6;
}

.date_btn_wrap {
  position: relative;
  z-index: 1;
}

.date_btn {
  position: absolute;
  top: 0;
  color: #333;
  font-size: 1.6em;
  line-height: 1.6em;
  padding: 0.8em 0;
  text-align: center;
  cursor: pointer;
  width: 25%;
  box-sizing: border-box;
  font-weight: 700;
}

.date_btn:first-child {
  left: 0;
}

.date_btn:last-child {
  right: 0;
  color: #fe5b00;
}

.gear {
  float: left;
  position: absolute;
  z-index: 9902;
  width: 5.5em;
  margin-top: -4em;
  overflow-y: auto;
  transition: transform 0.1s ease-out;
  cursor: pointer;
}

.date_roll > div .gear {
  width: 100%;
}

.tooth {
  height: 2.8571em;
  line-height: 2.8571em;
  text-align: center;
  font-size: 0.7em;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .form-section {
    margin: 0 10px;
  }

  .main-title {
    font-size: 20px;
  }

  .fortune-btn {
    min-width: 240px;
    padding: 12px 30px;
    font-size: 16px;
  }

  .radio-group {
    gap: 15px;
  }

  .radio-item {
    padding: 6px 12px;
  }
}

.gearDate {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  position: absolute;
  position: fixed;
  overflow-y: scroll; /* 允许纵向滚动 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9900;
  overflow: hidden;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transform: translateZ(0);
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 黑色遮罩，透明度为 0.7 */
  z-index: 9901; /* 确保遮罩在内容之下 */
}

.date_ctrl {
  vertical-align: middle;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  color: #363837;
  margin: 0;
  height: auto;
  width: 100% !important;
  max-width: 600px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9902;
  // overflow: hidden;
  margin: 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -ms-user-select: none;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

// .bounceInUp {
//   -webkit-animation: bounceInUp 0.3s ease-in;
//   animation: bounceInUp 0.3s ease-in;
// }

// @-webkit-keyframes bounceInUp {
//   0% {
//     transform: translateY(-100%);
//   }

//   100% {
//     transform: translateY(0);
//   }
// }

// @keyframes bounceInUp {
//   0% {
//     transform: translateY(-100%);
//   }

//   100% {
//     transform: translateY(0);
//   }
// }

.date_roll {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  // overflow-y: auto; /* 使得只有这个区域可以滚动 */
  background-color: transparent;
  -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0));
  mask: gradient(
    linear,
    0 50%,
    0 100%,
    from(#debb47),
    to(rgba(36, 142, 36, 0))
  );
}

.date_roll > div {
  font-size: 2em;
  height: 10em;
  float: left;
  background-color: transparent;
  position: relative;
  // overflow: hidden;
  width: 33.3333%;
}

.date_roll_hh > div {
  width: 20%;
}

.date_roll_hh > div:last-child {
  width: 40%;
}

.date_roll_hhii > div {
  width: 20%;
}

.date_roll_mask {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y; /* 允许竖向滚动 */
  -webkit-mask: -webkit-linear-gradient(
    bottom,
    #debb47 50%,
    rgba(36, 142, 36, 0)
  );
  mask: -webkit-gradient(
    linear,
    0 40%,
    0 0,
    from(#debb47),
    to(rgba(36, 142, 36, 0))
  );
}
// .scroll-container {
//   overflow-y: auto; /* 允许垂直滚动 */
//   -webkit-overflow-scrolling: touch; /* 优化触摸滚动 */
// }

.date_grid {
  position: relative;
  top: 4em;
  width: 100%;
  height: 2em;
  margin: 0;
  box-sizing: border-box;
  z-index: 0;
  border-top: 2px solid #fe5b00;
  border-bottom: 2px solid #fe5b00;
  box-shadow: #fe5b00 0 0 4px;
  opacity: 0.3;
}

.date_grid > div {
  color: #000;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.8em;
  line-height: 2.5em;
}

.date_cw_btn {
  position: relative;
}

.date_class_box {
  text-align: center;
  padding: 1em 0;
  border-bottom: 1px solid #f6f6f6;
}

.date_class {
  display: inline-block;
  font-size: 1.4em;
  padding: 0.2em 0;
  width: 25%;
  text-align: center;
  color: #fe5b00;
  border: 1px solid #fe5b00;
  cursor: pointer;
  line-height: 1.6em;
  box-sizing: border-box;
}

.date_class:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-weight: 700;
}

.date_class:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.date_class_box .active {
  background-color: #fe5b00;
  color: #fff;
}

.date_btn_box {
  overflow: hidden;
  border-top: 1px solid #f6f6f6;
}

.date_btn_wrap {
  position: relative;
  z-index: 1;
}

.date_btn {
  position: absolute;
  top: 0;
  color: #333;
  font-size: 1.6em;
  line-height: 1.6em;
  padding: 0.8em 0;
  text-align: center;
  cursor: pointer;
  width: 25%;
  box-sizing: border-box;
  font-weight: 700;
}

.date_btn:first-child {
  left: 0;
}

.date_btn:last-child {
  right: 0;
  color: #fe5b00;
}

.gear {
  float: left;
  position: absolute;
  z-index: 9902;
  width: 5.5em;
  margin-top: -4em;
  overflow-y: auto;
  /* 允许垂直滚动 */
  transition: transform 0.1s ease-out;
  cursor: pointer;
}

.date_roll > div .gear {
  width: 100%;
}

.tooth {
  height: 2.8571em;
  line-height: 2.8571em;
  text-align: center;
  font-size: 0.7em;
}

.date_confirm_wrap {
  text-align: center;
  display: none;
  position: relative;
}

.confirm_tit {
  padding: 0.68em 0;
  border-bottom: 1px solid #f6f6f6;
  font-size: 1.8em;
  color: #fe5b00;
}

.confirm_tip {
  display: inline-block;
  font-size: 1.4em;
  color: #666;
  line-height: 1.6em;
  margin: 1em;
}

.confirm_p {
  font-size: 1.7em;
  line-height: 2em;
}

.confirm_p b {
  color: #fe5b00;
  font-weight: 400;
}

.confirm_btn {
  position: relative;
  padding: 1.4em 0 2.7em;
}

.confirm_btn > div {
  display: inline-block;
  margin: 0 1em;
  color: #fff;
  font-size: 1.6em;
  border-radius: 5px;
  padding: 0.6em 1.2em;
}

.confirm_btn_cancel {
  background-color: #b1b1b1;
}

.confirm_btn_finish {
  background-color: #fe5b00;
}
</style>
